<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>借还统计</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">

    <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
    <script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
    <script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
    <!-- 引入 echarts.js -->
    <script src="/static/js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;">

</div>

<!--ctx-->
<script th:replace="~{fragment::ctx}"/>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var chart = document.getElementById('main');
    var echart = echarts.init(chart);

    $(function(){
        buildData();
    });

    //生成数据
    function buildData()
    {


        echart.showLoading();
        // 请求
        $.ajax({
            url: ctx+'api/book/list?page=1&limit=30',
            type: 'GET',
            contentType: "application/json",
            dataType: "json",
            data: "",
            success: function (result) {

                if (result.code ==0) {
                    console.log(JSON.stringify(result.data.name));
                    var data=result.data;
                    console.log(data);
                    //处理数据
                    chartData=[
                        {
                            name:'哲学',
                            value:0
                        },
                        {
                            name:'文化',
                            value:0
                        },
                        {
                            name:'古典文学',
                            value:0
                        },
                        {
                            name:'历史',
                            value:0
                        }
                        ,
                        {
                            name:'科幻',
                            value:0
                        },
                        {
                            name:'玄幻小说',
                            value:0
                        }
                    ]

                    for(var i=0,len=data.length;i<len;i++){
                        if(data[i].categoryName=='哲学'){
                            chartData[0].value++;
                        }
                        else if(data[i].categoryName=='文化'){
                            chartData[1].value++;
                        }
                        else if(data[i].categoryName=='古典文学'){
                            chartData[2].value++;
                        }
                        else if(data[i].categoryName=='历史'){
                            chartData[3].value++;
                        }
                        else if(data[i].categoryName=='科幻'){
                            chartData[4].value++;
                        }
                        else if(data[i].categoryName=='玄幻小说'){
                            chartData[5].value++;
                        }
                        else{
                            chartData[6].value++;
                        }
                    }
                    echart.hideLoading();
                    buildChart(chartData);
                } else {
                    layer.alert(result.message);
                }
            }
        });

        /*for(var i=0;i<columLabel.length;i++)
        {
            for(var j=0;j<columName.length;j++)
            {
                arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
            }
            console.info(arrData);
            columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
        }*/


    }

    //生成图形
    function buildChart(chartData)
    {

        var option = {
            title: {
                text: '图书分类统计',
                subtext: '数据实时更新'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [ '书籍数量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['哲学', '文化', '古典文学', '历史', '科幻', '玄幻小说']
            },
            series: [
                {
                    name: '书籍数量',
                    type: 'bar',
                    data: chartData,
                    color:'#8B1A1A'
                },

            ]
        };

        echart.setOption(option);
    }


</script>


</body>

</html>